<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="cfn" uri="http://com.abou/cfn"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/fn"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<%-- Creates a product viewer (display the product images with a loupe js component).
    Parameters are :
    - name : the product name
    - imagePath1 : the product image 1
    - imagePath2 : the product image 2
    - imagePath3 : the product image 3
    - imagePath4 : the product image 4
--%>

<!-- The images Viewer -->
<div id="imagesWrapper">
	<!-- Tabs -->
    <ul>
       <li>
       	<a href="#image1" id="tab1" class="actif" onclick="setActif(this.id);">
       		<img src="${cfn:format(pageContext, param.imagePath1)}"
       			alt="" title="" height="100px" width="125px" />
       	</a>
       </li>

       <c:if test="${not empty param.imagePath2}">
       	<li>
       		<a href="#image2" id="tab2" onclick="setActif(this.id);">
       			<img src="${cfn:format(pageContext, param.imagePath2)}"
       				alt="" title="" height="100px" width="125px" />
       		</a>
       	</li>
       </c:if>

       <c:if test="${not empty param.imagePath3}">
		<li>
			<a href="#image3" id="tab3" onclick="setActif(this.id);">
				<img src="${cfn:format(pageContext, param.imagePath3)}"
					alt="" title="" height="100px" width="125px" />
			</a>
		</li>
	</c:if>

	<c:if test="${not empty param.imagePath4}">
		<li>
			<a href="#image4" id="tab4"  onclick="setActif(this.id);">
				<img src="${cfn:format(pageContext, param.imagePath4)}"
					alt="" title="" height="100px" width="125px" />
			</a>
		</li>
	</c:if>
    </ul>

<!-- Images -->
    <div id="images">
        <div>
        	<a name="image1"></a>
        	<img id="img1" src="${cfn:format(pageContext, param.imagePath1)}"
			alt="${param.name}" height="250px" width="200px" ALIGN=MIDDLE>

		<script type="text/javascript">
			$(document).ready(function() {
				$('#img1').jloupe({
					radiusLT:100,
					margin:12,
					borderColor:false,
					backgroundColor: '#fff',
					image:'${resFolder}img/loupe/loupe-trans.png'
					});
			});
		</script>
	</div>

	<c:if test="${not empty param.imagePath2}">
        <div>
        	<a name="image2"></a>
        	<img id="img2" src="${cfn:format(pageContext, param.imagePath2)}"
		alt="${param.name}" height="250px" width="200px" ALIGN=MIDDLE>

		<script type="text/javascript">
			$(document).ready(function() {
				$('#img2').jloupe({
					radiusLT:100,
					margin:12,
					borderColor:false,
					backgroundColor: '#fff',
					image:'${resFolder}img/loupe/loupe-trans.png'
					});
			});
		</script>
        </div>
       </c:if>

       <c:if test="${not empty param.imagePath3}">
        <div>
        	<a name="image3"></a>
        	<img id="img3" src="${cfn:format(pageContext, param.imagePath3)}"
		alt="${param.name}" height="250px" width="200px" ALIGN=MIDDLE>

		<script type="text/javascript">
			$(document).ready(function() {
				$('#img3').jloupe({
					radiusLT:100,
					margin:12,
					borderColor:false,
					backgroundColor: '#fff',
					image:'${resFolder}img/loupe/loupe-trans.png'
					});
			});
		</script>
        </div>
       </c:if>

       <c:if test="${not empty param.imagePath4}">
        <div>
        	<a name="image4"></a>
        	<img id="img4" src="${cfn:format(pageContext, param.imagePath4)}"
		alt="${param.name}" height="250px" width="200px" ALIGN=MIDDLE>

		<script type="text/javascript">
			$(document).ready(function() {
				$('#img4').jloupe({
					radiusLT:100,
					margin:12,
					borderColor:false,
					backgroundColor: '#fff',
					image:'${resFolder}img/loupe/loupe-trans.png'
					});
			});
		</script>
        </div>
       </c:if>
     </div>
</div>

<script type="text/javascript">

//removing the hash after a refresh
$(document).ready(function() {
	parent.location.hash = '';
});

function setActif(elementId){

	$("#imagesWrapper").find('a').removeClass('actif');
	$("#"+elementId).addClass('actif');
}
</script>